<template>
  <div>
    <my-breadcrumb :items="['系统设置', '通用设置']"/>
    <div class="material">
      <Card dis-hover title="材料费设置">
        <ul v-if="showInput" class="price">
          <li>
            <InputNumber :value="0" :readonly="true"/>
            至<InputNumber :min="1" :max="orderPrice[1] - 1" v-model="orderPrice[0]" />
            材料费<InputNumber :min="0" v-model="materialPrice[0]" @on-blur="priceChange(0)"/>
            <Button type="primary" @click="addPrice" v-if="orderPrice.length === 1">添加</Button>
          </li>
          <li v-for="(price, index) in orderPrice" :key="index">
            <div v-if="index < orderPrice.length - 1">
              <InputNumber :value="price" :readonly="true" />
              至<InputNumber :min="price + 1" :max="orderPrice[index + 2] - 1" v-model="orderPrice[index + 1]" />
              材料费<InputNumber v-model="materialPrice[index + 1]" @on-blur="priceChange(index + 1)"/>
              <Button type="primary" @click="addPrice" v-if="index === orderPrice.length - 2">添加</Button>
              <Button type="error" @click="deletePrice(index)" class="none">删除</Button>
            </div>
            <div v-else>
              大于<InputNumber v-model="orderPrice[orderPrice.length - 1]" /> 材料费<InputNumber v-model="lastValue" @on-blur="priceChange(orderPrice.length)"/>
            </div>
          </li>
          <li>
            <Button type="primary" @click="materialSub">提交</Button>
            <Button type="primary" @click="reset">取消</Button>
          </li>
        </ul>
        <ul class="show" v-else>
          <li>
            <Tag color="blue" :fade="false">0￥</Tag>~
            <Tag color="blue" :fade="false">{{orderPrice[0]}}￥</Tag>
            <span style="margin-left: 16px;">材料费</span>
            <span style="color: #ed3f14;">{{materialPrice[0]}}￥</span>
          </li>
          <li v-for="(price, index) in orderPrice" :key="index" v-if="index < orderPrice.length - 1">
            <Tag color="blue" :fade="false">{{price}}￥</Tag>~
            <Tag color="blue" :fade="false">{{orderPrice[index + 1]}}￥</Tag>
            <span style="margin-left: 16px;">材料费</span>
            <span style="color: #ed3f14;">{{materialPrice[index + 1]}}￥</span>
          </li>
          <li v-else>
            大于
            <Tag color="blue" :fade="false">{{orderPrice[orderPrice.length - 1]}}￥</Tag>
            <span style="margin-left: 16px;">材料费</span>
            <span style="color: #ed3f14;">{{lastValue}}￥</span>
          </li>
          <li>
            <Button type="primary" @click="showInput = true">修改</Button>
            <Button :type="setting.materialStatus ? 'error' :'primary'" @click="changeStatus">{{setting.materialStatus ? '禁用' : '启用'}}</Button>
            <span>当前已{{ setting.materialStatus ?  '启用，点击禁用可禁用材料费' : '禁用，点击启用可启用材料费'}}</span>
          </li>
        </ul>
      </Card>
    </div>
    <div class="company">
      <Card title="物流公司设置" dis-hover>
        <CheckboxGroup v-model="logistic" @on-change="changeChoose">
          <h3>物流</h3>
          <Checkbox v-for="(item, index) in allLog1" :key="index" :label="item.id">
            <span>{{item.courierCompanyName}}</span>
          </Checkbox>
          <h3>快递</h3>
          <Checkbox v-for="(item, index) in allLog2" :key="index" :label="item.id">
            <span>{{item.courierCompanyName}}</span>
          </Checkbox>
        </CheckboxGroup>
      </Card>
    </div>
    <div class="other">
      <Card title="其他设置" dis-hover>
        <Form :model="orderSet" :label-width="90">
          <FormItem label="订单显示比例">
            <InputNumber v-model="orderSet.orderDisplay" :min="10" :max="100" @on-change="updateDisplay"/><span>% 最后更新时间：{{ orderSet.orderTime | format }}</span>
          </FormItem>
          <FormItem label="是否显示销量">
            <i-switch v-model="orderSet.isDisplaySales" @on-change="salesChange">
              <span slot="open">是</span>
              <span slot="close">否</span>
            </i-switch>
          </FormItem>
          <FormItem label="支付消息推送">
            <i-switch v-model="orderSet.isPushOrderPaidMessage" @on-change="messageChange">
              <span slot="open">开</span>
              <span slot="close">关</span>
            </i-switch>
          </FormItem>
        </Form>
      </Card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'setting',
  data () {
    return {
      url: {
        set: '/branch/setting/list',
        materialList: '/branch/material/expense/setting/list',
        materialAdd: '/branch/material/expense/setting/add',
        materialUpdate: '/branch/material/expense/setting/update',
        materialChange: '/branch/material/expense/setting/change',
        getLogistice: '/branch/common/logistics/choose',
        updateLogistice: '/branch/common/logistics/update',
        commonUpdate: '/branch/common/setting/update'
      },
      showInput: false,
      materialPrice: [],
      orderPrice: [],
      initData: [],
      lastValue: null,

      setting: {
        materialStatus: false
      },
      orderSet: {
        orderDisplay: 10,
        orderTime: 0,
        isDisplaySales: false,
        isPushOrderPaidMessage: false
      },
      logistic: [],
      allLog1: [],
      allLog2: []
    }
  },
  methods: {
    addPrice () {
      if (this.orderPrice[this.orderPrice.length - 1] <= this.orderPrice[this.orderPrice.length - 2]) {
        return
      }
      if (this.orderPrice[this.orderPrice.length - 1] !== null && this.materialPrice[this.materialPrice.length - 1] !== null) {
        this.orderPrice.push(null)
        this.materialPrice.push(null)
      }
    },
    deletePrice (index) {
      this.orderPrice.splice(index + 1, 1)
      this.materialPrice.splice(index + 1, 1)
    },
    reset () {
      this.showInput = false
      if (this.materialPrice[this.materialPrice.length - 1] === null) {
        this.materialPrice.splice(this.materialPrice.length - 1, 1)
        this.orderPrice.splice(this.orderPrice.length - 1, 1)
      }
    },
    materialSub () {
      let initArr = []
      this.initData.forEach(item => {
        initArr.push(item.endPaymentInterval / 100)
      })
      initArr.splice(initArr.length - 1, 1)
      if (JSON.stringify(initArr) === JSON.stringify(this.orderPrice)) {
        return
      }
      let interval = []
      let postage = []
      this.orderPrice.forEach((item, index) => {
        if (item !== null) {
          interval.push(item * 100)
          postage.push(this.materialPrice[index] * 100)
        }
      })
      if (this.lastValue === null) {
        this.$Message.error('填写完整信息再提交')
        return
      }
      let params = {
        interval,
        postage,
        maxLimit: this.lastValue * 100
      }
      this.$ajax.post(this.url.materialAdd, JSON.stringify(params)).then(res => {
        if (res.data.success) {
          this.$Message.success('更新成功')
          this.showInput = false
        }
      })
    },
    priceChange (index) {
      if ((this.materialPrice[index] === null || this.materialPrice[index] === this.initData[index].materialExpense / 100) && index <= this.materialPrice.length - 1) {
        return
      }
      if ((this.lastValue === null || this.lastValue === this.initData[index].materialExpense / 100) && index === this.materialPrice.length) {
        return
      }
      let params = {
        intervalId: this.initData[index].id,
        postage: this.materialPrice[index] ? this.materialPrice[index] * 100 : this.lastValue * 100
      }
      this.$ajax.post(this.url.materialUpdate, JSON.stringify(params)).then(res => {
        if (res.data.success) {
          this.$Message.success('修改成功')
        }
      })
    },
    changeStatus () {
      this.$ajax.post(this.url.materialChange, !this.setting.materialStatus).then(res => {
        if (res.data.success) {
          this.$Message.success('修改成功')
          this.setting.materialStatus = !this.setting.materialStatus
        }
      })
    },
    // 更新订单显示
    updateDisplay () {
      if (this.orderSet.orderDisplay >= 10) {
        this.$ajax.post(this.url.commonUpdate, this.orderSet.orderDisplay)
          .then(res => {
            if (res.data.success) {
              this.$Message.success('修改成功')
            }
          })
      }
    },
    initSetting () {
      this.$ajax.post(this.url.set).then(res => {
        this.setting.materialStatus = res.data.data.isCalculateMaterialExpense === 1
        this.orderSet.orderDisplay = res.data.data.orderDisplayRatio
        this.orderSet.orderTime = res.data.data.orderDisplayLastUpdate
        this.orderSet.isPushOrderPaidMessage = res.data.data.isPushOrderPaidMessage === 1
        this.orderSet.isDisplaySales = res.data.data.isDisplaySales === 1
      })
    },
    getLog () {
      this.$ajax.post(this.url.getLogistice).then(res => {
        if (res.data.success) {
          res.data.data.expressLogisticsInfos.forEach(item => {
            if (item.type === 2) {
              this.allLog1.push(item)
            } else if (item.type === 1) {
              this.allLog2.push(item)
            }
          })
          this.logistic = res.data.data.commonLogisticsId ? res.data.data.commonLogisticsId : []
        }
      })
    },
    changeChoose (choose) {
      this.$ajax.post(this.url.updateLogistice, JSON.stringify(this.logistic)).then(res => {
        if (res.data.success) {
          this.$Message.success('修改成功')
        }
      })
    },
    salesChange (val) {
      this.commonRequest({isDisplaySales: val, isPushOrderPaidMessage: this.orderSet.isPushOrderPaidMessage})
    },
    messageChange (val) {
      this.commonRequest({isPushOrderPaidMessage: val, isDisplaySales: this.orderSet.isDisplaySales})
    },
    commonRequest (obj) {
      this.$ajax.post(this.url.commonUpdate, obj)
        .then(res => {
          if (res.data.success) {
            this.$Message.success('修改成功')
          }
        })
    }
  },
  created () {
    this.initSetting()
    this.getLog()
    this.$ajax.post(this.url.materialList).then(res => {
      this.initData = JSON.parse(JSON.stringify(res.data.data))
      if (res.data.success) {
        this.lastValue = res.data.data.splice(res.data.data.length - 1, 1)[0].materialExpense / 100
        if (res.data.data[0]) {
          res.data.data.forEach(item => {
            this.orderPrice.push(item.endPaymentInterval / 100)
            this.materialPrice.push(item.materialExpense / 100)
          })
        } else {
          this.orderPrice.push(null)
          this.materialPrice.push(null)
        }
      }
    })
  }
}
</script>

<style scoped>
  .price li{
    margin-bottom: 16px;
  }
  .show li{
    height: 40px;
  }
  .none{
    display: none;
  }
  .price li:hover .none{
    display: inline-block;
  }
  .company{
    margin-top: 16px;
  }
  .postage{
    margin-top: 16px;
  }
  .other{
    margin-top: 16px;
  }
</style>
